<template>
  <div class="card">
    <!-- <img src="employee-avatar.png" alt="员工头像" class="avatar" /> -->
    <div class="card-content">
      <h2 class="name">{{ employee.name }}</h2>
      <p class="users">已有{{ employee.users }}人使用</p>
      <p class="description">智能生成小红书内容，自动分析爆款笔记，提升账号运营效率</p>
      <div class="pricing">
        <span class="shared">共享版 ¥{{ employee.shared }}/月</span>
        <span class="exclusive">独享版 ¥{{ employee.exclusive }}/月</span>
      </div>
      <button class="detail-btn">查看详情</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    employee: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.card {
  display: flex;
  background-color: #34495e;
  border-radius: 8px;
  padding: 16px;
  width: 300px;
  height: 200px;
}
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.card-content {
  flex: 1;
  margin-left: 16px;
}
.name {
  font-size: 18px;
}
.users {
  color: #2980b9;
}
.pricing {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.detail-btn {
  padding: 8px 16px;
  background-color: #2980b9;
}
</style>